<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>根据数据 生成表单</title>
</head>

<body>
    <form action="" id="form"></form>
        <!-- <form action="">
        <p>
            <label for="">用户名：</label>
            <input type="text">
        </p>
        <p>
            <label for="">密码：</label>
            <input type="password">
        </p>
    </form> -->

    <script>     
      var arr= [
        {
            label: "用户名",
            name: "username",
            type: "text"
        }, {
            label: "密码",
            name: "password",
            type: "password"
        }, {
            label: "性别",
            name: "gender",
            type: "select",
            value: ['男', '女', '不男', '不女', 'Gay', '妖王']
        }, {
            label: "爱好",
            name: "hobby",
            type: "checkbox",
            value: ['篮球', '足球', '羽毛球', '兵乓球', '爬山', '购物', '旅游', '看美女']

        }, {
            label: '是否已婚',
            name: 'married',
            type: 'radio',
            value: ['已婚', '未婚']
        },
        {
            label: '简介',
            name: 'resume',
            type: 'textarea'
        }
        ];
    var form=document.querySelector('#form');
    // 循环数组根据数组的数据生成表单
    arr.forEach(function(item,index){
        var p=document.createElement('p');
        // 生成一个p标签
        var label=document.createElement('label');
        //生成一个lable标签
        label.innerHTML=item.label+':';
        p.appendChild(label);
        var input;
        // 不能够直接创建input标签，而是根据数组对象中type类型来判断生成的标签类型
        // type为text,possword就生成input
        // 如果为radio,checkbox就生成span标签，再根据对象中的value循环生成input元素
        // type为select生成select标签
        // type为textarea生成textarea标签
        switch(item.type){
            case 'text':
                case 'password':
                    input=document.createElement('input');
                    input.type=item.type;
                    input.id=item.name;
                    p.appendChild(input);
                    break;
                    case 'radio':
                        case 'checkbox':
                            // 
                            input=document.createElement('span')
                            item.value.forEach(function(items,index){
                                var inp=document.createElement('input');
                                // 用来存放文字
                                var text=document.createElement('lable');
                                text.innerHTML=items;
                                inp.type=item.type;
                                // 给input添加name属性，实现单选按钮的切换
                                inp.name=item.name;
                                input.appendChild(inp);
                                input.appendChild(text);
                            })
                            p.appendChild(input)
                            break;
                            case 'select':
                                input=document.createElement('select');
                                item.value.forEach(function(items,index){
                                    // 循环对象中的value生成option标签
                                    var option=document.createElement('option');
                                    option.innerHTML=items;
                                    input.appendChild(option);
                                })
                                p.appendChild(input)
                                break;
                                case 'textarea':
                                    input=document.createElement('textarea');
                                    p.appendChild(input)
                            }
                            // p标签添加到form之中
                            form.appendChild(p);

        }
    )

    </script>
</body>
</html>